<template>
<!-- 这是商城首页目录 -->
  <div id="catalog">
    <div class="title_swipe">
      <div class="title_img">
        <van-swipe :autoplay="5000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="title_MunuText">
        <div class='catalog'>
          <ul>
            <div class="list">
            <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile">
              <li :class="[classBool ? 'delay1 delay': '', cover ? 'noneDelay': '']">
                <span class="blod-font"> MALL HTMOPAGE </span><span class="Small_catalog">商城首页</span>
              </li>
            </a>
            <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods&cate=1372">
              <li :class="[classBool ? 'delay2 delay': '', cover ? 'noneDelay': '']">
                <span class="blod-font">BUILDING MATERIAL</span><span class="Small_catalog">建&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 材</span></li>
            </a>
            <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods&cate=1304">
              <li :class="[classBool ? 'delay3 delay': '', cover ? 'noneDelay': '']">
                <span class="blod-font">HOME APPLIANCE</span><span class="Small_catalog">家&nbsp; &nbsp; &nbsp; &nbsp; 电</span></li>
            </a>
              <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods&cate=1304">
              <li :class="[classBool ? 'delay3 delay': '', cover ? 'noneDelay': '']">
                <span class="blod-font">FURNITURE</span><span class="Small_catalog">家&nbsp; &nbsp; &nbsp; &nbsp; 具</span></li>
            </a>
            <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=goods&cate=1262">
              <li :class="[classBool ? 'delay4 delay': '', cover ? 'noneDelay': '']">
                <span class="blod-font">DESIGNER</span><span class="Small_catalog">设计师</span></li>
            </a>
            <a href="https://mp.uekea.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=shop.category">
              <li :class="[classBool ? 'delay5 delay': '', cover ? 'noneDelay': '']">
                <span class="blod-font">ALL COMMODITIES</span><span class="Small_catalog">全部商品</span></li>
            </a>
              <li :class="[classBool ? 'delay6 delay': '', cover ? 'noneDelay': '']"><span class="hotline">HOTLINE: 4000-310-103</span></li>
            </div>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
export default {
  data () {
    return {
      classBool: false, //是否添加延时动画类名
      cover: false, //是否添加没有延时的类名
      images: [
        'https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/images/MallCatalog/background-1.jpg',
        'https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/images/MallCatalog/background-2.jpg',
        'https://uekea-1257881260.cos.ap-guangzhou.myqcloud.com/images/MallCatalog/background-3.jpg'
      ],
    }
  },
  mounted () {
    var _this = this;
    _this.classBool = true; //添加动画类名
    // 等最后一个过渡2.2s效果完成，才添加没延时的类名，取消动画类名
    setTimeout(()=> {
      _this.cover = true;
      _this.classBool = false;
    },(210 * document.getElementsByTagName("li").length))
  },
}
</script>


<style lang="less" scoped>
@font-face {
      src:url('../../fonts/YouYuan.ttf');
      font-family: 'YouYuan';
}

@font-face {
  src:url('../../fonts/Century-Gothic.ttf');
  font-family: 'Century-Gothic';
}

#audio_btn {
  display: none;
  height: 0px;
}
.title_swipe {
  height: 100vh;
  position: relative;
  font-size: 0px;
  .van-swipe {
    height: 100%;
  }
  .title_img {
    height: 100%;
    img {
      height: 100%;
      width: 100%;
    }
  }
}

.title_MunuText {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2001;
    background-color: rgba(0, 0, 0, 0.4);
  }

.relation {
  position: absolute;
  bottom: 40px;
  left: 0px;
  font-size: 15px;
  color: #cecece;
  opacity: 0.7;
  text-indent: 20px;
  .phone {
    margin-top: 5px;
    a {
      color:  #cecece;
      text-decoration: underline;
    }
  }
  .number1 {
    margin-right: 3px;
  }
  .number2 {
    margin-left: 3px;
  }
}

.list {
  padding-top: 3vh;
}
.catalog {
  margin-top: 16vh;
}

ul {
    height: 75vh;
    margin: 8%;
    background-color: rgba(15,14,18,0.3);
    position: relative;

  li {
    font-size: 0.42rem;
    list-style: none;
    text-indent: 50px;
    padding: 6px 0px;
    margin-left: -100px;
    opacity: 0;
    color: #ffc030;

    .blod-font {
      font-family: 'Century-Gothic';
      font-size: 20px;
      font-weight: 600;
      display: block;
      letter-spacing: 1.5px;
      color: #ffc030;
    }

    .Small_catalog {
      font-family: 'YouYuan';
      font-size: 15px;
      display: block;
      letter-spacing: 1.5px;
      color: #cecece;
      font-weight: 600;

    }
    
    // 热线电话
    .hotline {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;
      font-family: 'Century-Gothic';
      font-size: 20px;
      font-weight: 600;

      color: #ffc030;
      text-indent: 0px;
      text-align: center;
    }
  
  }
  div.list a li:hover{
    background-color: #ccc;
    color: #333;
  }
  li:hover .hotline{ 
    background-color: none;

  }
  li:hover .Small_catalog {
    color: #333;
  }
}

.delay {
  margin-left: 0px;
  opacity: 0.8;
  transition-duration: 0.5s; 
}
.delay1 {
  transition-delay: 0.2s;
}
.delay2 {
  transition-delay: 0.4s;
}
.delay3 {
  transition-delay: 0.6s;
}
.delay4 {
  transition-delay: 0.8s;
}
.delay5 {
  transition-delay: 1s;
}
.delay6 {
  transition-delay: 1.2s;
}
.delay7 {
  transition-delay: 1.4s;
}
.delay8 {
  transition-delay: 1.6s;
}
.delay9 {
  transition-delay: 1.8s;
}

// 取消过渡时间和延时
.noneDelay {
  margin-left: 0px;
  opacity: 0.8;
  transition-delay: 0s;
  transition-duration: 0s;
}
</style>

